<template>
  <div v-if="props.runInfo != null" class="row">
    <blockquote style="width: 100%">
      <a
        class="t-typography"
        direction="ltr"
        :href="'http://' + props.runInfo.jobManagerAddress"
        target="_blank"
        rel="noopener noreferrer"
      >[:{{ props.runInfo.jobManagerAddress }}]</a>
      <span>{{ props.runInfo.startTime }}</span>
      <span>{{ props.runInfo.endTime }}</span>
      <span class="t-badge"/>
      <span :class="props.runInfo.status == 'SUCCESS' ? 'text-green' : 'text-red'">{{ props.runInfo.status }}</span>
      <span class="code">{{ props.taskParams.name }}</span>
      <span class="tg-blue flex">
        <span
          role="img"
          aria-label="fire"
          class="anticon"
        ><svg
          viewBox="64 64 896 896"
          focusable="false"
          data-icon="fire"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            d="M834.1 469.2A347.49 347.49 0 00751.2 354l-29.1-26.7a8.09 8.09 0 00-13 3.3l-13 37.3c-8.1 23.4-23 47.3-44.1 70.8-1.4 1.5-3 1.9-4.1 2-1.1.1-2.8-.1-4.3-1.5-1.4-1.2-2.1-3-2-4.8 3.7-60.2-14.3-128.1-53.7-202C555.3 171 510 123.1 453.4 89.7l-41.3-24.3c-5.4-3.2-12.3 1-12 7.3l2.2 48c1.5 32.8-2.3 61.8-11.3 85.9-11 29.5-26.8 56.9-47 81.5a295.64 295.64 0 01-47.5 46.1 352.6 352.6 0 00-100.3 121.5A347.75 347.75 0 00160 610c0 47.2 9.3 92.9 27.7 136a349.4 349.4 0 0075.5 110.9c32.4 32 70 57.2 111.9 74.7C418.5 949.8 464.5 959 512 959s93.5-9.2 136.9-27.3A348.6 348.6 0 00760.8 857c32.4-32 57.8-69.4 75.5-110.9a344.2 344.2 0 0027.7-136c0-48.8-10-96.2-29.9-140.9zM713 808.5c-53.7 53.2-125 82.4-201 82.4s-147.3-29.2-201-82.4c-53.5-53.1-83-123.5-83-198.4 0-43.5 9.8-85.2 29.1-124 18.8-37.9 46.8-71.8 80.8-97.9a349.6 349.6 0 0058.6-56.8c25-30.5 44.6-64.5 58.2-101a240 240 0 0012.1-46.5c24.1 22.2 44.3 49 61.2 80.4 33.4 62.6 48.8 118.3 45.8 165.7a74.01 74.01 0 0024.4 59.8 73.36 73.36 0 0053.4 18.8c19.7-1 37.8-9.7 51-24.4 13.3-14.9 24.8-30.1 34.4-45.6 14 17.9 25.7 37.4 35 58.4 15.9 35.8 24 73.9 24 113.1 0 74.9-29.5 145.4-83 198.4z"
          /></svg></span>
        {{ props.runInfo.jobId }}
      </span>
    </blockquote>
    <span v-if="props.runInfo.error" style="width: 100%">ERROR:</span>
    <pre
      v-if="props.runInfo.error"
      style="
        height: 200px;
        background: #e65d6e;
        display: block;
        overflow: scroll;
        width: 100%;
        padding: 0.4em 0.6em;
        white-space: pre-wrap;
        word-wrap: break-word;
        background: hsla(0, 0%, 58.8%, 0.1);
        border: 1px solid hsla(0, 0%, 39.2%, 0.2);
        border-radius: 3px;
      "
      class="pre"
    >
      {{ props.runInfo.error }}
    </pre>
    <span v-if="props.runInfo.statement">statement:</span>
    <pre
      style="
        height: 120px;
        background: #eee;
        display: block;
        overflow: scroll;
        width: 100%;
        padding: 0.4em 0.6em;
        white-space: pre-wrap;
        word-wrap: break-word;
        background: hsla(0, 0%, 58.8%, 0.1);
        border: 1px solid hsla(0, 0%, 39.2%, 0.2);
        border-radius: 3px;
      "
      class="pre"
    >
      {{ props.runInfo.statement }}
    </pre>
  </div>
</template>

<script lang="ts" setup>
import { watch, reactive, ref, toRefs, onActivated, defineEmits } from "vue";
const props = defineProps({
  taskParams: { type: Object, default: () => ({}) },
  runInfo: { type: Object, default: () => ({}) }
})
</script>

<style scoped lang="less">
blockquote {
  padding: 0 0 0 0.6em;
  border-left: 4px solid hsla(0, 0%, 39.2%, 0.2);
  opacity: 0.85;
  display: flex;
  justify-content: start;
  flex-direction: row;
  align-items: center;
  margin: 0;
  a {
    color: #1890ff;
    outline: none;
    cursor: pointer;
    transition: color 0.3s;
    text-decoration: none;
  }
  span {
    margin: 0 8px;
    display: block;
  }
  .t-badge {
    width: 6px;
    height: 6px;
    vertical-align: middle;
    border-radius: 50%;
    background-color: #52c41a;
  }
  .code {
    margin: 0 0.2em;
    padding: 0.2em 0.4em 0.1em;
    font-size: 85%;
    background: hsla(0, 0%, 58.8%, 0.1);
    border: 1px solid hsla(0, 0%, 39.2%, 0.2);
    border-radius: 3px;
  }
  .tg-blue {
    color: #096dd9;
    background: #e6f7ff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    display: flex;
    justify-content: center;
  }
}
</style>
